<template>
  <div v-if="load" class="main">
    <div class="item left">
      <div class="item">
        <div class="title">
          总巡查情况
          <div class="img">
            <img src="../../assets/main_left_item_tit_tag.png" alt=""/>
          </div>
        </div>
        <div class="con" style="padding: 0">
          <div class="showcase">
            <img class="border-box" src="../../assets/dashboard/1.gif">
            <count-to class="num" :end-val="inspection.all.total" style="margin-top: 0"></count-to>
            <div class="name">总巡查任务数</div>
          </div>
          <div class="showcase">
            <img class="border-box" src="../../assets/dashboard/1.gif">
            <count-to class="num" :end-val="inspection.all.normal" style="margin-top: 0"></count-to>
            <div class="name">无隐患</div>
          </div>
          <div class="showcase">
            <img class="border-box" src="../../assets/dashboard/1.gif">
            <count-to class="num" :end-val="inspection.all.suspected" style="margin-top: 0"></count-to>
            <div class="name warn">疑似隐患</div>
          </div>
          <div class="showcase">
            <img class="border-box" src="../../assets/dashboard/1.gif">
            <count-to class="num" :end-val="inspection.all.processed" style="margin-top: 0"></count-to>
            <div class="name">已处理</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">
          每日巡查情况
          <el-date-picker v-model="searchData.inspection.day" type="date" size="mini" placeholder="选择日期"
                          style="width: 125px">
          </el-date-picker>
        </div>
        <div class="con" style="padding: 0">
          <div class="showcase">
            <count-to class="num technology-bold" :end-val="inspection.day.total"></count-to>
            <img class="border-box" src="../../assets/dashboard/3.gif">
            <div class="name">总巡查任务数</div>
          </div>
          <div class="showcase">
            <count-to class="num technology-bold" :end-val="inspection.day.normal"></count-to>
            <img class="border-box" src="../../assets/dashboard/3.gif">
            <div class="name">无隐患</div>
          </div>
          <div class="showcase">
            <count-to class="num technology-bold" :end-val="inspection.day.suspected"></count-to>
            <img class="border-box" src="../../assets/dashboard/3.gif">
            <div class="name warn">疑似隐患</div>
          </div>
          <div class="showcase">
            <count-to class="num technology-bold " :end-val="inspection.day.processed"></count-to>
            <img class="border-box" src="../../assets/dashboard/3.gif">
            <div class="name">已处理</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">
          每周巡查情况
          <el-date-picker v-model="searchData.inspection.week" type="week" format="yyyy第WW周" size="mini"
                          placeholder="选择日期" style="width: 125px">
          </el-date-picker>
        </div>
        <div class="con" style="padding: 0">
          <div class="showcase">
            <count-to class="num technology-bold" :end-val="inspection.week.total"></count-to>
            <img class="border-box" src="../../assets/dashboard/5.gif">
            <div class="name">总巡查任务数</div>
          </div>
          <div class="showcase">
            <count-to class="num technology-bold" :end-val="inspection.week.normal"></count-to>
            <img class="border-box" src="../../assets/dashboard/5.gif">
            <div class="name">无隐患</div>
          </div>
          <div class="showcase">
            <count-to class="num technology-bold" :end-val="inspection.week.suspected"></count-to>
            <img class="border-box" src="../../assets/dashboard/5.gif">
            <div class="name warn">疑似隐患</div>
          </div>
          <div class="showcase">
            <count-to class="num technology-bold" :end-val="inspection.week.processed"></count-to>
            <img class="border-box" src="../../assets/dashboard/5.gif">
            <div class="name">已处理</div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="banner"></div>
      <div class="item nav">
        <div v-for="(item, i) in nav" class="nav-item" :class="searchData.module === i ? 'active' : ''" :key="i"
             @click="searchData.module = i">
          {{ item }}
        </div>
      </div>
      <div class="item">
        <div class="map-search">
          <el-date-picker v-model="searchData.map.time" style="
                    width: 40%;
                    background: rgba(46, 108, 151, 0.2);
                    border: 1px solid #40afff;
                  " size="mini" type="daterange" range-separator="至" start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
          <el-cascader style="width: 30%" size="mini" clearable v-model="searchData.map.cityValue"
                       placeholder="请选择省市区"
                       :options="regions" popper-class="ele-pop-wrap-higher" @change="cityChange"/>
          <el-select style="width: 20%" clearable v-model="searchData.map.street_id" size="mini"
                     placeholder="请选择街道地址">
            <el-option v-for="(item, i) in streets" :key="i" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-button size="mini" type="primary" @click="getMapData">搜索</el-button>
        </div>
        <div class="map">
<!--          <div id="map-radio" class="map-radio">-->
<!--            <el-radio-group v-model="searchData.map.operation_category" @input="getMapData">-->
<!--              <el-radio :label="1" class="map-radio-1">疑似隐患</el-radio>-->
<!--              <el-radio :label="2" class="map-radio-2">无隐患</el-radio>-->
<!--              <el-radio :label="3" class="map-radio-3">已处罚</el-radio>-->
<!--            </el-radio-group>-->
<!--          </div>-->
          <div class="uav-monitor-btn" @click="uavMonitor">无人机监控</div>
          <div v-if="uavMonitorShow" class="uav-monitor">
            <div class="uav-monitor-title"><i class="el-icon-circle-close" @click="uavMonitorShow = false"></i></div>
            <div class="uav-monitor-con">
              <div v-for="(uav, i) in uavList" :key="i" class="uav-monitor-con-item" @click="showUavLiveDialog(uav)">
                <div v-loading="uavLiveLoading[i]"
                     style="position: relative;"
                     element-loading-text="正在连接无人机"
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="rgba(0, 0, 0, 0.8)">
                  <div v-if="uav.error" class="uav-error">{{ uav.error }}</div>
                  <video v-else ref="video" width="128" height="72"></video>
                  <div class="uav-name">{{ uav.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <map-marker-container ref="map" :center="[114.04491, 22.696735]" @onload="mapLoad" @uavClick="uavClick"></map-marker-container>
        </div>
      </div>
<!--      <div class="item">-->
<!--        <div class="title">-->
<!--          各个街道巡查情况-->
<!--          <el-date-picker v-model="searchData.street.line.date" type="date" size="mini" placeholder="选择日期"-->
<!--                          style="width: 125px">-->
<!--          </el-date-picker>-->
<!--        </div>-->
<!--        <div class="con">-->
<!--          <div v-if="load" ref="streetLine" style="width: 100%; height: 380px"></div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
    <div class="item right">
      <div class="item">
        <div class="title">
          预警历史
          <div class="img">
            <img src="../../assets/main_left_item_tit_tag.png" alt=""/>
          </div>
        </div>
        <div class="con early-warning">
          <div class="cell cell-title">
            <div style="width: 100px">序号</div>
            <div style="width: 120px;">分类名称</div>
            <div style="width: 140px;">巡查类型</div>
            <div>预警安全隐患</div>
          </div>
          <swiper-container
              v-show="earlyWarningData.length"
              direction="vertical"
              :slides-per-view="6"
              loop
              autoplay
              :speed="100"
              :autoplay-delay="1000"
              :autoplay-wait-for-transition="false"
              autoplay-disable-on-interaction
              style="width: 100%; height: 240px; padding: 6px 0; box-sizing: border-box">
            <swiper-slide v-for="(item, i) in earlyWarningData" :key="i" class="cell" style="box-sizing: border-box">
              <div style="width: 100px">{{ i + 1 }}</div>
              <div style="width: 120px;">{{ item.abnormal_type }}</div>
              <div style="width: 140px;">{{ item.abnormal }}</div>
              <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-left: 4px">{{ item.feedback }}</div>
            </swiper-slide>
          </swiper-container>
        </div>
      </div>
      <div class="item">
        <div class="title">
          各街道情况
          <div class="img">
            <img src="../../assets/main_left_item_tit_tag.png" alt=""/>
          </div>
        </div>
        <div class="con">
          <div class="street-search">
            <el-cascader style="width: 48%" size="mini" clearable v-model="searchData.street.list.area"
                         placeholder="请选择省市区"
                         :options="regions" popper-class="ele-pop-wrap-higher"/>
            <el-date-picker v-model="searchData.street.list.date" style="
                    width: 48%;
                    background: rgba(46, 108, 151, 0.2);
                    border: 1px solid #40afff;
                  " size="mini" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
            <exception-category-select style="width: 82%!important" size="mini" :type="searchData.module"
                                       v-model="searchData.street.list.exception_category"></exception-category-select>
            <el-button size="mini" style="width: 14%" type="primary" @click="getStreetData('list')">搜索</el-button>
          </div>
          <swiper-container
              v-show="streetData.length"
              direction="vertical"
              loop
              autoplay
              :autoplay-delay="5000"
              :autoplay-wait-for-transition="false"
              autoplay-disable-on-interaction
              style="width: 100%; height: 502px;">
            <template v-for="(item, i) in streetData">
              <swiper-slide v-if="i%3 === 0" :key="i">
                <div class="street-box">
                  <div class="item" v-for="j in 3" :key="j">
                    <div class="street-title">{{ streetData[i + j - 1].street }}</div>
                    <div class="progress-box">
                      <div class="progress-item">
                        <div class="icon">
                          <img src="../../assets/anomaly.png" alt=""/>
                        </div>
                        <div class="progress-con">
                          <div class="name" style="font-weight: 600; color: #ff0000">疑似隐患：{{ streetData[i + j - 1].data.suspected }}</div>
                          <div class="progress-bar-container">
                            <div class="progress-bar" style="background-color:#d9423a;"
                                 :style="'width: '+streetData[i+j-1].data.suspectedRate+'%'"></div>
                          </div>
                        </div>
                      </div>
                      <div class="progress-item">
                        <div class="icon">
                          <img src="../../assets/normal.png" alt=""/>
                        </div>
                        <div class="progress-con">
                          <div class="name">无隐患: {{ streetData[i + j - 1].data.normal }}</div>
                          <div class="progress-bar-container">
                            <div class="progress-bar" style="background-color:#1bcda8;"
                                 :style="'width: '+streetData[i+j-1].data.normalRate+'%'"></div>
                          </div>
                        </div>
                      </div>
                      <div class="progress-item">
                        <div class="icon">
                          <img src="../../assets/handled.png" alt=""/>
                        </div>
                        <div class="progress-con">
                          <div class="name">已处理：{{ streetData[i + j - 1].data.processed }}</div>
                          <div class="progress-bar-container">
                            <div class="progress-bar" :style="'width: '+streetData[i+j-1].data.processedRate+'%'"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </template>
          </swiper-container>
        </div>
      </div>
    </div>
    <el-dialog :title="uavInfo.name" :visible.sync="uavLiveDialog.show" custom-class="uav-dialog" :before-close="uavLiveDialogClose">
      <div class="uav-live">
        <div v-for="i in 2" :key="i" v-loading="uavLiveDialog.loading[i - 1]" class="uav-live-item"
             element-loading-text="正在连接无人机"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <div v-if="uavInfo.show && uavInfo.error[i - 1]" class="uav-error" style="height: 273px">{{ uavInfo.error[i - 1] }}</div>
          <video v-else ref="videoDialog" width="480" height="270" controls></video>
          <div class="uav-info">机位{{i}} <span class="date">{{timestampString}}</span></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import exceptionCategorySelect from './components/exceptionCategorySelect'
import countTo from 'vue-count-to'
import * as echarts from 'echarts'
import {regionData} from 'element-china-area-data'
import MapMarkerContainer from './components/map'
import flv from 'flv.js'
import {register} from 'swiper/swiper-element-bundle'
register()

export default {
  components: {
    countTo,
    MapMarkerContainer,
    exceptionCategorySelect
  },
  data() {
    return {
      load: false,
      searchData: {
        module: 'emergency',
        inspection: {
          day: '',
          week: ''
        },
        street: {
          line: {
            date: ''
          },
          list: {
            area: ['44', '4403', '440309'],
            date: '',
            exception_category: 0
          }
        },
        map: {
          time: '',
          cityValue: ['44', '4403', '440309'],
          street_id: null,
          operation_category: 1
        }
      },
      queryStreet: null,
      nav: {
        emergency: '应急巡查',
        way: '道路交通',
        protection: '环保监管',
        illegal: '违建监管'
      },
      regions: regionData,
      streets: [],
      inspection: {
        all: {
          total: 0,
          suspected: 0,
          normal: 0,
          processed: 0,
        },
        day: {
          total: 0,
          suspected: 0,
          normal: 0,
          processed: 0,
        },
        week: {
          total: 0,
          suspected: 0,
          normal: 0,
          processed: 0,
        },
      },
      streetData: [],
      earlyWarningData: [],
      streetLineIntervalIndex: 0,
      streetLineInterval: null,
      flvPlayer: {},
      uavMonitorShow: false,
      uavList: [],
      uavLiveLoading: [],
      uavInfo: {},
      uavLiveDialog: {
        show: false,
        loading: [false, false]
      },
      timestampString: ''
    }
  },
  watch: {
    'searchData.module'() {
      this.initData()
    },
    'searchData.inspection.day'(val) {
      this.getInspectionData('day', val)
    },
    'searchData.inspection.week'(val) {
      this.getInspectionData('week', val)
    },
    'searchData.street.line.date'() {
      this.getStreetData('line')
    }
  },
  beforeRouteEnter(to, from, next) {
    let arr = to.path.split('/')
    arr = arr[arr.length - 1].split('-')
    next((vm) => {
      if (arr.length > 1) {
        vm.queryStreet = {
          id: arr[1],
          name: to.meta.title
        }
        vm.searchData.map.street_id = arr[1]
      } else {
        vm.queryStreet = null
        vm.searchData.map.street_id = null
      }
      vm.initData()
      vm.getStreet(vm.searchData.map.cityValue[2])
    })
  },
  beforeRouteLeave(to, from, next) {
    this.load = false
    next()
  },
  methods: {
    initData() {
      this.load = true
      this.getInspectionData()
      this.getInspectionData('day')
      this.getInspectionData('week')
      this.getStreetData('line')
      this.getStreetData('list')
      this.getEarlyWarningData()
    },
    getInspectionData(type = 'all', date = null) {
      this.$http.post('/dashboard/inspection', {
        street: this.queryStreet?.id,
        module: this.searchData.module,
        type: type,
        date: date
      }).then(res => {
        this.inspection[type] = res.data.data
      }).catch((e) => {
        this.$message.error(e.message)
      })
    },
    getStreetData(type) {
      if (type === 'list') {
        this.streetData = []
      }
      const param = Object.assign({module: this.searchData.module}, this.searchData.street[type])
      this.$http.post('/dashboard/street', param).then(res => {
        if (type === 'line') {
          this.drawStreetLine(res.data.data)
          if (this.streetLineInterval) {
            clearInterval(this.streetLineInterval)
          }
          this.streetLineInterval = setInterval(() => {
            this.drawStreetLine(res.data.data, this.streetLineIntervalIndex)
          }, 1000)
        } else {
          this.streetData = []
          for (let item of res.data.data) {
            item.data.normalRate = Math.round(item.data.normal / item.data.total * 100)
            item.data.processedRate = Math.round(item.data.processed / item.data.total * 100)
            item.data.suspectedRate = Math.round(item.data.suspected / item.data.total * 100)
            this.streetData.push(item)
          }
          this.streetData = res.data.data
        }
      }).catch((e) => {
        this.$message.error(e.message)
      })
    },
    getEarlyWarningData() {
      this.$http.post('/dashboard/earlyWarning', {
        street: this.queryStreet?.id,
        module: this.searchData.module
      }).then(res => {
        this.earlyWarningData = res.data.data
      }).catch((e) => {
        this.$message.error(e.message)
      })
    },
    drawStreetLine(data, index = 0) {
      const map = {
        normal: {name: '无隐患', color: '#17a68c'},
        processed: {name: '已处理', color: '#518fbc'},
        suspected: {name: '疑似隐患', color: '#ff0000'},
        total: {name: '总巡查', color: '#0595ff'},
      }
      const xAxis = []
      const series = []
      const legend = []
      const seriesData = {normal: [], processed: [], suspected: [], total: []}
      const echart = echarts.init(this.$refs.streetLine)

      for (let i = 0; i < 5; i++) {
        let k = i + index
        if (k >= data.length) {
          k = k - data.length
        }
        xAxis.push(data[k].street)
        for (let key in data[k].data) {
          seriesData[key].push(data[k].data[key])
        }
      }
      for (let key in map) {
        legend.push(map[key].name)
        series.push({
          name: map[key].name,
          type: 'line',
          label: {
            show: true,
            color: '#fff',
            position: 'inside',
            formatter: '{c}',
          },
          smooth: true,
          animation: true,
          color: map[key].color,
          data: seriesData[key],
        })
      }
      echart.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "5%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          data: legend,
          textStyle: {
            color: '#75bdff',
            fontSize: 14,
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true, //保证刻度线和标签对齐
          },
          data: xAxis
        },
        yAxis: {
          type: 'value',
          boundaryGap: true,
          splitLine: false,
        },
        series: series
      })
      if (index >= data.length - 1) {
        this.streetLineIntervalIndex = 0
      } else {
        this.streetLineIntervalIndex++
      }
    },
    cityChange(event) {
      this.getStreet(event[2])
    },
    getStreet(city) {
      this.$http.post('/street/get', {city: city}).then(res => {
        this.streets = res.data.data
        if (!this.queryStreet) {
          this.searchData.map.street_id = null
        }
      }).catch((e) => {
        this.$message.error(e.message)
      })
    },
    mapLoad() {
      this.getMapData()
      this.setMapUav()
    },
    async getMapData() {
      this.$http.post('/statistics/getMapData', Object.assign({type: this.searchData.module}, this.searchData.map)).then((res) => {
        let main, sub = null, zoom = 12, center = [114.04491, 22.696735]
        if (this.searchData.map.street_id && res.data.data.polygon) {
          main = res.data.data.polygon.polygon
          sub = res.data.data.polygon.children
          zoom = 13
          if (res.data.data.polygon.center) {
            center = res.data.data.polygon.center
          }
        } else {
          main = res.data.data.district
          if (res.data.data.polygon) {
            sub = res.data.data.polygon.polygon
          }
        }
        this.$refs.map.setHighlight(main, sub, zoom, center)
        //this.$refs.map.setMarker(res.data.data.list, this.searchData.map.operation_category)
      }).catch((e) => {
        throw e;
        //this.$message.error(e.message);
      })
    },
    setMapUav() {
      //this.$refs.map.addUav(8, [114.04491, 22.696735])
      if (typeof (WebSocket) == 'undefined') {
        return this.$message.error('您的浏览器不支持scoket')
      }
      this.$http.post('/uav/getList', {all: 1}).then(res => {
        this.setTimestampString(res.data.timestamp)
        this.uavList = res.data.data
        for (let uav of res.data.data) {
          const socket = new WebSocket(uav.ws)
          socket.onopen = () => {
            console.log('uav socket connect success')
          }
          socket.onclose = () => {
            console.log('uav socket connect close')
          }
          socket.onerror = e => {
            this.$message.error('uav socket connect error:' + e)
          }
          socket.onmessage = msg => {
            msg = JSON.parse(msg.data)
            const uavFind = this.uavList.find(item => {
              return item.plane_id === msg.planeId
            })
            if (!uavFind) {
              this.uavList.push(uav)
            }
            console.log('uav socket msg', msg, msg.planeId, msg.lon, msg.lat)
            if (msg.lon) {
              this.$refs.map.moveUav(msg.planeId, [msg.lon / 10000000, msg.lat / 10000000])
            }
          }
        }
      }).catch((e) => {
        this.$message.error(e.message)
      })
    },
    setTimestampString(timestamp) {
      const date = new Date(timestamp * 1000)
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }
      this.timestampString = date.toLocaleString('zh-CN', options).replace(/\//g, '-')
      setTimeout(() => {
        this.setTimestampString(timestamp + 1)
      }, 1000)
    },
    async uavClick(id) {
      this.uavLiveDialog.show = true
      this.uavLiveDialog.loading = true
      this.$http.post('/uav/find', {id: id}).then(res => {
        this.uavInfo = res.data.data
        if (this.uavInfo) {
          this.showUavLiveDialog(this.uavInfo)
        }
      })
    },
    async uavMonitor() {
      if (this.uavMonitorShow) {
        for (const flvPlayer of this.flvPlayer) {
          flvPlayer.pause()
          flvPlayer.destroy()
        }
        this.flvPlayer = {}
        this.uavMonitorShow = false
        return
      }
      this.uavMonitorShow = true
      for (let i in this.uavList) {
        this.$set(this.uavLiveLoading, i, true)
        this.$set(this.uavList[i], 'error', null)
        setTimeout(() => {
          this.uavLive('uav' + i, this.$refs.video[i], this.uavList[i].video_url, index => {
            this.$set(this.uavLiveLoading, index.substr(3), false)
          }, (e, index) => {
            index = index.substr(3)
            this.$set(this.uavList[index], 'error', e)
            this.$set(this.uavLiveLoading, index, false)
          })
        }, 100)
      }
    },
    showUavLiveDialog(uav) {
      this.uavLiveDialog.show = true
      this.uavLiveDialog.loading = [true, true]
      this.uavInfo = JSON.parse(JSON.stringify(uav))
      this.uavInfo.error = [null, null]
      setTimeout(() => {
        let i = 0
        while (i++ < 2) {
          const videoElement = this.$refs.videoDialog[i - 1]
          videoElement.addEventListener('loadedmetadata', function() {
            Object.defineProperty(this, 'duration', { value: Infinity, writable: false })
          })
          this.uavLive('dialog' + i, videoElement, uav[i === 1 ? 'video_url' : 'video_url2'], res => {
            this.$set(this.uavLiveDialog.loading, parseInt(res.substr(-1, 1)) - 1, false)
          }, (e, res) => {
            let index = parseInt(res.substr(-1, 1)) - 1
            this.uavInfo.error[index] = e
            this.$set(this.uavLiveDialog.loading, index, false)
          })
        }
      }, 100)
    },
    uavLiveDialogClose(done) {
      let i = 0
      while (i++ < 2) {
        if (typeof this.flvPlayer['dialog' + i] != 'undefined') {
          this.flvPlayer['dialog' + i].pause()
          this.flvPlayer['dialog' + i].destroy()
          delete this.flvPlayer['dialog' + i]
        }
      }
      done()
    },
    uavLive(id, ref, url, callback, error) {
      const interval = setInterval(() => {
        if (flv.isSupported() && typeof ref != 'undefined') {
          clearInterval(interval)
          const flvPlayer = flv.createPlayer({
            type: 'flv',
            url: url
          })
          flvPlayer.attachMediaElement(ref)
          flvPlayer.load()
          flvPlayer.play()
          flvPlayer.on(flv.Events.METADATA_ARRIVED, () => {
            callback(id)
          })
          flvPlayer.on(flv.Events.ERROR, e => {
            error(e, id)
            flvPlayer.destroy()
            delete this.flvPlayer[id]
          })
          this.flvPlayer[id] = flvPlayer
        }
      }, 100)
    }
  }
}
</script>

<style>
.el-input__inner {
  background: rgba(0, 0, 0, 0);
}

#map-radio .el-radio__inner {
  background: rgba(0, 0, 0, 0);
}

#map-radio .map-radio-1 {
  color: #d9423a;
}

#map-radio .map-radio-1 .el-radio__inner {
  border-color: #d9423a;
}

#map-radio .map-radio-1.is-checked .el-radio__inner {
  background: rgba(0, 0, 0, 0);
}

#map-radio .map-radio-1 .el-radio__input.is-checked + .el-radio__label {
  color: #d9423a !important;
}

#map-radio .map-radio-1 .el-radio__inner::after {
  background-color: #d9423a;
}

#map-radio .map-radio-2 {
  color: #1bcda8;
}

#map-radio .map-radio-2 .el-radio__inner {
  border-color: #1bcda8
}

#map-radio .map-radio-2.is-checked .el-radio__inner {
  background: rgba(0, 0, 0, 0);
}

#map-radio .map-radio-2 .el-radio__input.is-checked + .el-radio__label {
  color: #1bcda8 !important;
}

#map-radio .map-radio-2 .el-radio__inner::after {
  background-color: #1bcda8;
}

#map-radio .map-radio-3 {
  color: #1c9fef;
}

#map-radio .map-radio-3 .el-radio__inner {
  border-color: #1c9fef;
}

#map-radio .map-radio-3.is-checked .el-radio__inner {
  background: rgba(0, 0, 0, 0);
}

#map-radio .map-radio-3 .el-radio__input.is-checked + .el-radio__label {
  color: #1c9fef !important;
}

#map-radio .map-radio-3 .el-radio__inner::after {
  background-color: #1c9fef;
}

@property --rotate {
  syntax: "<angle>";
  initial-value: 20deg;
  inherits: false;
}
.banner {
  overflow: hidden;
  position: relative;
  text-align: center;
  border-radius: 7px;
  width: 450px;
  height: 36px;
  line-height: 36px;
  font-size: 22px;
  color: white;
  user-select: none;
  margin: 6px auto;
  padding: 6px;
  z-index: 2;
}

.banner::before {
  position: absolute;
  border-radius: 7px;
  content: "";
  inset: -20px;
  background: linear-gradient(var(--rotate), transparent 1%, rgb(0, 72, 255), #00b7ff, rgba(0, 42, 255, 0.72), transparent 98%);
  z-index: -1;
  animation: banner-spin 2.4s linear infinite;
  transform-origin: 50% 50%;
}

.banner::after {
  content: "翼飞鸿天智慧城市无人机监控数据大屏";
  position: absolute;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0, 0, 0);
  inset: 3px;
  letter-spacing: 0.1em;
}

@keyframes banner-spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}
.uav-dialog {
  width: 480px;
  height: 540px;
}

.uav-dialog .el-dialog__header {
  height: 24px;
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  justify-content: space-between;
  width: 100%;
}

.uav-dialog .el-dialog__header .el-dialog__title {
  color: #fff;
  width: calc(100% - 40px);
  font-size: 14px;
  text-align: left;
  padding-left: 12px;
}

.el-dialog .el-dialog__header .el-dialog__title::before {
  left: 4px;
}

.uav-dialog .el-dialog__header .el-dialog__headerbtn {
  position: unset;
  top: 0;
  margin-right: 8px;
}

.uav-dialog .el-dialog__body {
  padding: 0;
  margin: 0;
}
</style>

<style lang="scss" scoped>
@font-face {
  font-family: "Technology-Bold";
  src: url("../../assets/Technology-Bold.ttf") format("woff2");
}

@keyframes progress-animation {
  0% {
    opacity: .8;
    width: 0;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
}

.technology-bold {
  font-family: "Technology-Bold", sans-serif;
}

.uav-live {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-direction: column;

  &-item {
    margin-bottom: 1px;
    position: relative;

    .uav-info {
      position: absolute;
      top: 0;
      background-color: rgba(0, 0, 0, 0.3);
      width: 100%;
      text-align: left;
      color: #fff;
      font-size: 12px;
      padding: 2px 4px;

      .date {
        margin-left: 8px;
      }
    }
  }
}

.main {
  background-image: url(../../assets/bg1.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 24px;

  .item {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    width: 100%;

    .title {
      border-left: 4px solid #75bdff;
      font-size: 16px;
      color: #75bdff;
      font-weight: bold;
      display: flex;
      text-align: left;
      align-items: center;
      padding-left: 8px;
      justify-content: space-between;

      .img {
        width: 200px;
        height: 28px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center center;
        }
      }
    }

    .con {
      padding: 12px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .showcase {
        width: 50%;
        box-sizing: border-box;
        color: #FFFFFF;
        position: relative;
        margin-top: -12px;

        .border-box {
          width: 100px;
          height: 100px;
          position: absolute;
          box-sizing: border-box;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .num {
          margin-top: 20px;
          display: inline-block;
          box-sizing: border-box;
          font-size: 24px;
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;

          &.technology-bold {
            font-size: 28px;
            font-weight: bold;
            word-spacing: 2px;
          }
        }

        .name {
          font-size: 13px;
          margin-top: 6px;
          color: #75bdff;

          &.warn {
            font-weight: 600;
            color: red;
          }
        }
      }
    }
  }

  .left {
    width: 25%;
  }

  .center {
    margin: -12px 16px 0 16px;
    width: 45%;
    min-width: 600px;

    .nav {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;

      .nav-item {
        cursor: pointer;
        width: 178px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        background-image: url(../../assets/Rectangle.png);
        background-size: 100% 100%;
        font-size: 16px;
        font-weight: bold;
        color: #fff;

        &.active {
          background-image: url(../../assets/Rectangles.png);
        }
      }
    }

    .map-search {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2px;
    }

    .map {
      flex: 1;
      border: 1px solid #129bfe;
      position: relative;
      max-height: 760px;
      overflow: hidden;

      .map-radio {
        position: absolute;
        z-index: 9;
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 12px;
        background: rgba(0, 0, 0, 0.6);
      }

      .uav-monitor-btn {
        position: absolute;
        z-index: 9;
        right: 8px;
        top: 8px;
        padding: 4px 8px;
        background-color: rgba(75, 146, 193, 0.3);
        border: 1px solid rgb(75, 146, 193);
        border-radius: 6px;
        color: rgb(75, 146, 193);
        font-size: 12px;
        cursor: pointer;
      }

      .uav-monitor {
        position: absolute;
        z-index: 9;
        right: 8px;
        top: 40px;
        max-width: 414px;
        min-width: 412px;
        height: 262px;
        background-color: rgba(12, 36, 58, 0.9);
        border-radius: 6px;
        overflow-y: scroll;
        &-title {
          color: rgb(75, 146, 193);
          text-align: right;
          padding: 2px 6px 2px 4px;
        }

        &-con {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          padding: 0 6px;

          &-item {
            height: 72px;
            width: 128px;
            margin: 1px;
            background-color: #447599;
          }

          .uav-error {
            width: 100%;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: red;
            font-weight: 600;
          }

          .uav-name {
            position: absolute;
            top: 0;
            width: 100%;
            color: #40AFFF;
            background: rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }

  .right {
    width: 30%;

    .street-search {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 2px;
      margin-bottom: 10px;
    }

    .early-warning {
      width: 100%;

      .cell {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 6px 0;
        color: #75bdff;
        text-align: center;
        align-items: center;

        div {
          width: 100%;
          text-align: center;
        }

        &.cell-title {
          margin-top: -6px;
          border-bottom: 2px solid #75bdff;
          font-weight: 600;
        }
      }
    }

    .street-box {
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .item {
        box-sizing: border-box;
        border: 1px solid #129bfe;
        border-top-left-radius: 2px;
        overflow: hidden;

        .street-title {
          text-align: left;
          padding: 6px 0 6px 10px;
          color: #fff;
          background: linear-gradient(90deg, #0758c4 0%, rgba(7, 88, 196, 0) 100%);
        }

        .progress-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          overflow: hidden;

          .progress-item {
            display: flex;
            align-items: center;
            padding-top: 2px;

            .icon {
              margin: 2px 8px;
              width: 30px;
              height: 30px;
              overflow: hidden;

              img {
                width: 100%;
              }
            }

            .progress-con {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              text-align: left;
              width: 100%;
              margin: 8px;

              .name {
                font-size: 12px;
              }

              .progress-bar-container {
                width: 100%;
                height: 8px;
                border-radius: 4px;
                background-color: rgba(0, 0, 0, 0);
                overflow: hidden;
              }

              .progress-bar {
                height: 100%;
                border-radius: 4px;
                background-color: #1c9fef;
                transition: width 0.3s ease;
                position: relative;

                &:before {
                  content: "";
                  opacity: 0;
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background: #fff;
                  border-radius: 4px;
                  animation: progress-animation 2s ease-in-out infinite;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
